<template>
  <DraggableModal
    :visible="props.showModal"
    title="查看详情"
    width="800px"
    :footer="false"
    :maskClosable="true"
    @cancel="modalCancelFn"
  >
    <div class="modal-top">
      <Row style="margin-bottom: 20px">库存类型：单支库存</Row>
      <Row>
        存放位置：
        {{ props.data?.storageDesp ? props.data.storageDesp : props.data?.position }}
      </Row>
    </div>
    <div class="modal-bottom">
      <Row class="modal-bottom-title">样本信息</Row>
      <Row>
        <Col
          v-for="item in state.detailData"
          :key="item.id"
          class="modal-bottom-item"
          span="12"
        >
          <div>{{ item.name }} : {{ item.title ? item.title : '' }}</div>
        </Col>
      </Row>
    </div>
  </DraggableModal>
</template>

<script setup lang="ts">
import { DraggableModal } from '@/framework/components/core/draggable-modal';
import { Row, Col } from 'ant-design-vue';
import { reactive, watch } from 'vue';
import { getSampleInfo } from '@/api/store/single_data';
import { commonSearch } from '@/api/common/common_data';
type state = {
  detailData: any;
  cacheData: any;
};

/**
 * data
 */
const props = withDefaults(
  defineProps<{
    showModal: boolean;
    data: any;
    id: any;
  }>(),
  {
    showModal: false,
  },
);
const emits = defineEmits<{
  (e: 'update:showModal', state: boolean): void;
}>();

const state: state = reactive({
  detailData: {},
  cacheData: {},
});

/**
 * fn
 */
const getDetailData = async () => {
  // 请求表单列表
  let params = {
    orderBy: [
      {
        field: 'sortIndex',
        order: 'asc',
      },
    ],
    groupId: 'specimen_fields',
  };
  const commonData = await commonSearch(params);
  state.detailData = commonData.result;
  const sampleInfo = await getSampleInfo(props.id);
  sampleInfo.result.epc = '';
  Object.keys(sampleInfo.result).forEach((item) => {
    let obj = state.detailData.find((el) => el.key === item);
    if (obj) {
      obj.title = sampleInfo.result[item];
      if (obj.key === 'serial') {
        obj.title = props.data.epc;
      } else if (obj.key === 'epc') {
        obj.title = props.data.serial;
      }
    }
  });
};

watch(
  () => props.showModal,
  (newValue) => {
    if (newValue) {
      getDetailData();
    }
  },
);
/**
 * modal
 */
const modalCancelFn = () => {
  emits('update:showModal', false);
};
</script>

<style scoped lang="less">
.modal-top {
  background: rgba(238, 249, 254, 1);
  padding: 10px 20px;
  border: rgba(195, 222, 251, 1) 1px solid;
  border-radius: 5px;
  font-size: 14px;
  margin-bottom: 20px;
}

.modal-bottom {
  padding: 20px;
  border: rgba(195, 222, 251, 1) 1px solid;
  height: 400px;
  border-radius: 5px;
  font-size: 14px;
  overflow-y: auto;
}

.modal-bottom-title {
  font-weight: bold;
  margin-bottom: 20px;
}

.modal-bottom-item {
  text-align: center;
  margin-bottom: 30px;
  div {
    padding-left: 70px;
    text-align: left;
  }
}
</style>
